import {useModel} from "@umijs/max";
import {Tour} from "antd";
import {useState} from "react";

export const TemplateTour = () => {
  const [currentStep, setCurrentStep] = useState(0);
  const {isTour, setIsTour} = useModel('global');


  return (
    <Tour
      open={isTour}
      onClose={() => {
        // localStorage.setItem('tourShown', 'true');
        setIsTour(false);
      }}
      steps={[
        {
          title: '组件库',
          description: '左侧是组件库，您可以拖拽各种组件到画布上进行页面设计',
          target: () => document.getElementById('component-panel') as HTMLElement,
          placement: 'right'
        },
        {
          title: '设计画布',
          description: '中间是设计区域，您可以在这里自由布局和调整页面元素',
          target: () => document.getElementById('design-canvas') as HTMLElement,
          placement: 'top',
          // autoAdjustOverflow: false,
        },
        {
          title: '属性设置',
          description: '右侧是属性面板，您可以在这里调整选中组件的各种属性',
          target: () => document.getElementById('property-panel') as HTMLElement,
          placement: 'left'
        },
        {
          title: '智能助手',
          description: '通过右下角的智能助手，您可以用自然语言快速生成页面',
          target: () => document.getElementById('tourChat') as HTMLElement,
          placement: 'left'
        }
      ]}
      current={currentStep}
      onChange={setCurrentStep}
    />
  )
}
